<template>
	<div id="main">
		<div class="store-content item">
			<div class="item-box">
				<div class="gallery-wrapper">
					<div class="gallery">
						<div class="thumbnail">
							<ul>
								<li :class="{'on':index==imgIndex}" @click="tableImg(index)" :key='index' v-for="image,index in itemInfo.ali_images">
									<img :src="image+'?x-oss-process-image/resize,w_54/quality,Q_90/format,webp'">
								</li>				
							</ul>
						</div>
						<div class="thumb">
							<ul>
								<li :class="{'on':index==imgIndex}" v-for="image,index in itemInfo.ali_images">
									<img :src="image+'?x-oss-process-image/resize,w_440/quality,Q_90/format,webp'">
								</li>						
							</ul>
						</div>
					</div>
				</div>
				<div class="banner">
					<div class="sku-custom-title">
						<div class="params-price">
							<span><em>¥</em><i>{{itemInfo.price}}</i></span>
						</div>
						<div class="params-info">
							<h4>{{itemInfo.title}}</h4>
							<h6>{{itemInfo.sub_title}}</h6>
						</div>
					</div>
					<div class="sku-dynamic-params-panel">
						<div class="sku-dynamic-params clear">
							<span class="params-name">颜色</span>
							<ul class="params-colors">
								<li class="cur" v-for="color,index in itemInfo.sku_list">
									<router-link :title="color.color" :to="{path:'Item',query:{itemId:color.id}}">
										<img :src="'http://img01.smartisanos.cn/'+color.image+'/20X20.jpg'">
									</router-link>
								</li>								
							</ul>
						</div>
						<div class="sku-dynamic-params clear">
							<div class="params-name">数量</div>
							<div class="params-detail clear">
								<div class="item-num js-select-quantity">
									<span class="down" :class="{'down-disabled':count<=1}" @click="subcount">-</span>
									<span class="num">{{count}}</span>
									<span class="up" :class="{'up-disabled':count>=itemInfo.limit_num}" @click="addcount">+</span>
								</div>
							</div>
						</div>
					</div>
					<div class="sku-status">
						<div class="cart-operation-wrapper clearfix">
							<span class="blue-title-btn js-add-cart" @click="addCarpanelData">
								<a>加入购物车</a>
							</span>

							<router-link tag="span" to='/Checkout' class="gray-title-btn" :class='{"disabled-btn":checkedCount<=0}'>
							    <a href="#">现在结算</a>
						    </router-link>
							<!-- <span class="gray-title-btn"><a>现在购买</a></span> -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹框效果 -->
		<prompt></prompt>
	</div>
</template>

<script>
// 引入相关数据
import itemsData from "../lib/newItemsData.js"
import prompt from "../components/prompt"

export default{
	data(){
		return{
			itemsData,
            itemId:this.$route.query.itemId,
            imgIndex:0,
            count:1
		} 
	},
	// 监听路由 从新赋值  右边图片跟着变
 	wacth:{
 		'$route.query.itemId'(){
 			this.itemId=this.$route.query.itemId
 		},
 	},
	computed:{
        itemInfo(){
        	let itemInfo=this.itemsData.filter((item)=>{
        		return Number(item.sku_id)===Number(this.itemId)
        	})[0]
        	return itemInfo
        }
	},
	methods:{
		fetchDate(){
			cosole.log('fd')
		},
		//图片的切换
		tableImg(index){
			this.imgIndex=index
		},
		// 添加购物车的方法
		addCarpanelData(data){
			let itemData={info:this.itemInfo,count:this.count}
            this.$store.commit('addCarpanelData',itemData)
		},
		//数量的减少
        subcount(){
            this.count --
            if(this.count < 1){
            	this.count = 1
            }
        },
		//数量的增加
        addcount(){
            this.count ++
                              //  库存
            if(this.count > this.itemInfo.limit_num){
            	this.count = this.itemInfo.limit_num
            }
        }
	},
	components:{
		prompt
	},

	//beforeUpdate数据更新时被调用（更新DOM前）点击颜色后再去更新数据
	beforeRouteUpdate(to, from, next){		
        this.itemId=to.query.itemId
		next();
	}
}
	
</script>

<style>
@import url(../assets/css/item.css);
</style>